<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { showFailToast } from 'vant';
import api from "@/api";

const route = useRoute()
const recipes = ref([])
const title = ref('')
onMounted(() => {
  title.value = route.query.title
  if (title.value == '本周热门') {
    weekTop()
  }else if(title.value == '收藏榜'){
    favoriteTop()
  }
})

const weekTop = () => {
  api.postReq('/recipe/weekTop').then(res => {
    let result = res.data
    if (result.code === 1) {
      recipes.value = result.data
    } else {
      showFailToast(result.msg)
    }
  })
}

const favoriteTop = ()=>{
  api.postReq('/recipe/favoriteTop').then(res => {
    let result = res.data
    if (result.code === 1) {
      recipes.value = result.data
    }else {
      showFailToast(result.msg)
    }
  })
}

const onClickLeft = () => history.back();
</script>

<template>
  <div class="recipe-page">
    <!-- 顶部标题 -->


    <van-nav-bar
        :title="route.query.title"
    left-arrow
    @click-left="onClickLeft"
    />


    <!-- 列表循环 -->
  <div 
    v-for="item in recipes" 
    :key="item.id" 
    class="recipe-card-container"  
  >
    <!-- 用 router-link 包裹整个卡片，to 指向目标路由 -->
    <router-link 
      :to="{ 
        path: '/recipe-detail',  // 目标页面的路由路径（需提前在路由表配置）
        query: { id: item.id }   // 用 query 传参（URL 中显示为 ?id=xxx）
        // 或用 params 传参：name: 'RecipeDetail', params: { id: item.id }（需路由配置动态参数）
      }"
      class="router-link-style"  
    >
      <div class="recipe-card">  <!-- 原卡片内容不变 -->
        <img :src="item.coverImage" class="recipe-img" />
        <div class="recipe-info">
          <h3 class="recipe-title">{{ item.title }}</h3>
          <div class="author">
            <img 
              class="author-avatar" 
              :src="item.user?.avatar || defaultAvatar" 
              alt="avatar" 
            />
            <span class="author-name">
              {{ item.user?.username || '用户ID：' + item.userId }}
            </span>
          </div>
          <p v-if="title == '本周热门'" class="recipe-desc">
            近七天收藏人数：{{ item.collectCount }}
          </p>
          <p v-if="title == '收藏榜'" class="recipe-desc">
            昨日收藏人数：{{ item.collectCount }}
          </p>
        </div>
      </div>
    </router-link>
  </div>
  </div>
</template>

<style scoped>
/* 清除 router-link 默认样式（可选但推荐） */
.router-link-style {
  text-decoration: none;
  color: inherit;
  display: block; /* 让链接充满整个卡片容器，点击任意位置均可跳转 */
}

/* 可选：添加hover效果增强交互 */
.recipe-card-container:hover .recipe-card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}
.recipe-page {
  padding: 16px;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}

.recipe-card {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.recipe-img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 12px;
  flex-shrink: 0;
}

.recipe-info {
  flex: 1;
}

.recipe-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px;
}

.recipe-desc {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.author {
  display: flex;
  align-items: center;
  margin: 4px 0;
  gap: 6px;
}

.author-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-size: 16px;
  color: #666;
}
</style>
